<template>
  <div class="vivid-message" :class="[`vivid-message__${type}`]">
    <div class="text"> {{ msg }}</div>
  </div>
</template>

<script setup lang="ts">

defineProps({
  msg: {
    required: true,
    type: String
  },
  type: {
    type: String,
    default: 'info'
  }
})
</script>

<style scoped>
.vivid-message {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem;
  border-radius: 4px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #fff;
  color: rgba(0, 0, 0, 0.65);
  transition: all 0.3s;
  cursor: pointer;
}

.vivid-message__info {
  border-left: 3px solid #1890ff;
}

.vivid-message__success {
  border-left: 3px solid #52c41a;
}

.vivid-message__warning {
  border-left: 3px solid #faad14;
}

.vivid-message__error {
  border-left: 3px solid #f5222d;
}
</style>
